<template>
  <view class="oder" @click.stop="orderDetail(item)">
    <!--订单信息-->
    <view class="name u-flex flex_bt">
      <view class="u-margin-left-20">
        <view class="u-pd-b-5">订单编号：{{item.apporderid || ''}}</view>
        <view class="u-pd-b-5">姓名：{{item.nickname}}</view>
        <view class="u-pd-b-5">下单时间：{{item.createdate}}</view>
        <view>电话：{{item.phone  || ''}}</view>
      </view>
<!--      <view>-->
<!--        <view class="u-pd-b-5">姓名：{{item.nickname}}</view>-->
<!--        <view>电话：{{item.phone  || ''}}</view>-->
<!--      </view>-->
    </view>
    <!--订单内容-->
    <view class="con ">
      <view v-for="data in item.service" class="flex u-margin-top-20">
        <item-image :img="data.image" :height="160" :width="160"></item-image>
        <view class="flex flex_bt">
          <view class="oderItem flex_bt flex-column">
            <view class="title">{{data.sname}}</view>
            <view class="time" v-if="type == 2">服务技师：{{item.technician_name || ''}}</view>
            <view  :class="type == 2?'time':'times'">预约时间：{{item.otime || ''}}</view>
          </view>
          <view class="price" v-if="type != 2">
            <view v-if="item.status == 2&& item.arrive_time!=0">正在服务</view>
            <view v-html="status" v-else></view>
            <view>￥{{data.price|| 0}}</view>
          </view>
        </view>
      </view>


    </view>
    <!--订单内容-->
    <view class="btn flex-r-b-e">
      <view class="button gary" @click.stop="aginOrder" v-if="type == 1&&item.status == 2 && item.arrive_time === 0">开始服务</view>
      <view class="button gary" @click.stop="endOder" v-if="item.status == 2 && item.arrive_time > 0">结束服务</view>
<!--      <view class="button gary" v-if="item.status == 8 || item.status == 4"  @click.stop="lookComent(item.id)">查看评价</view>-->
      <view class="button og" v-if="type == 2 && item.status == 2 && item.arrive_time === 0" @click.stop="zhuandan">转单</view>
      <view class="button green" @click.stop="orders(item)">帮Ta下单</view>
    </view>

  </view>
</template>

<script>
import user from "../../api/user_login";

export default {
  name: "order-item",
  data(){
    return{
    }
  },
  props: {
    item: {
      type: Object,
      default: {}
    } ,
    type: {
      type: Number | String,
      default: ''
    }
  },
  computed:{
    status(){
      // 1-待确认；2-待服务；3-待评价；4-售后;5-已取消
      switch (this.item.status){
        case 1:return '待确认'
        case 2:return '待服务'
        case 3:return '待评价'
        case 4:return '售后'
        case 5:return '已取消'
      }
    },
  },
  created(){
  },
  methods:{
    //开始服务
    aginOrder(){
      this.$emit('aginOrder',this.item)
    },
    //结束服务
    endOder(){
      this.$emit('endOder',this.item)
    },
    //转单
    zhuandan(){
      this.$emit('TransferOrder',this.item)
    },
    //下单
    orders(data){
      uni.removeStorage({
        key: 'userId',
        success: function (res) {
        }
      });
      this.$u.route({
        url:'/pagesA/placeAnOrder/index',
        params: {
          uid: data.uid,
          id: data.sid,
          rid: data.rid,
        }
      })
    },
    //订单详情
    orderDetail(data){
      if(this.type = 1){
        this.$u.route({
          url:'/pagesA/orderDetail/index',
          params: {
            id: data.id
          }
        })
      }
    },
    //查看评价
    lookComent(id){
      this.$u.route({
        url:'/pagesA/evaluate/index',
        params: {
          id: id,
          type:1
        }
      })
    },
  },
}
</script>

<style scoped lang="scss">
  .oder{
  width: 686rpx;
  min-height: 420rpx;
  background: #FFFFFF;
  border-radius: 12rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  padding: 10rpx 0;
  box-sizing: border-box;
wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww  .name{
    padding: 18rpx;
    box-sizing: border-box;
    background: #FFFFFF;
    font-size: 24rpx;
    color: $uni-text-color-grey;
    border-bottom: 2rpx solid $uni-border-color;
  }
  .con{
    padding: 18rpx;
    background: #FFFFFF;
    border-bottom: 2rpx solid $uni-border-color;
    .oderItem{
      margin-left: 20rpx;
      mmmmmmmmmmmmmmmmmwidth: 359rpx;
      .title{
        font-size: 32rpx;
        color: $uni-text-color;
      }
      .time{
        font-size: 28rpx;
        color:$uni-text-color-grey ;
      }
      .times{
        font-size: 28rpx;
        color: $uni-text-color;
      }
    }
    .price{
      color:$uni-color-price;
      font-size: 28rpx;
      view{
        &:nth-child(2){
          margin-top: 20rpx;
        }
      }

    }
  }
  .btn{
    padding: 18rpx;
    padding-right: 0;
    .button{
      width: 160rpx;
      margin-right: 20rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      border-radius: 8rpx;
    }
    .green{
      color: white;
      background: $uni-color-primary;
      border: 2rpx solid $uni-color-primary;
    }
    .og{
      color:$uni-color-price;
      border: 2rpx solid $uni-color-price;
    }
    .gary{
      background: #F2F2F2;
      border: 2rpx solid $uni-border-color;
      color: $uni-text-color;
    }
  }
}
</style>